<template>
	<view class="my-content-info">
		<view class="search-box"><u-search placeholder="输入商品" v-model="keyword" shape="round" @search="searchEvent"
				:showAction="false"></u-search></view>
		<view class="tab-box">
			<view class="tab-li" v-for="(item,index) in tabList" :class="{'cur-tab':curTab==index}"
				@click="tabEvent(index)">{{item.text}}</view>

		</view>
		<view class="tab-content" v-if="curTab==0">
			<view class="in-head">
				<view class="in-head-left">分类</view>
				<view class="in-head-right">商品</view>
			</view>
			<view class="in-model">
				<view class="in-model-left">
					<view class="cate-li" v-for="(item,index) in cateList" :key="index" @click="menuEvent(index,item)"
						:class="{'cate_active':cate_cur==index}">{{item.name}}</view>
				</view>
				<view class="in-model-right">
					<view class="good-li" v-for="(item,index) in cateGoodList" :key="index">
						<view class="goog-li-top">
							<view class="img"><u--image :src="item.goodsImg" width="180rpx" height="180rpx"></u--image>
							</view>
							<view class="g-info">
								<view class="g-title">{{item.goodsName}}</view>
								<view class="g-intro">
									<view class="g-tag">进价：￥{{item.costPrice}}</view>
									<view class="g-tag">库存：{{item.stock}}</view>
									<view class="g-tag">销售价：￥{{item.salePrice}}</view>
								</view>
							</view>
						</view>
						<view class="goog-li-bottom">
							<view class="g-btn edit" @click="editGood(item)">编辑</view>
							<view class="g-btn del" @click="delGood(item,index)">删除</view>
						</view>
					</view>
				</view>
			</view>
			<u-modal :show="showModel" :title="title" :content='content' :showConfirmButton="true" :showCancelButton="true"
				@confirm="confirmDelGood" @cancel="cancelDel"></u-modal>
			<u-loadmore :status="status" />
			<u-gap height="80" bgColor="#fff"></u-gap>
			<view class="bottom-btn-model">
				<view class="btn add-btn-good" @click="addGoods">添加商品</view>
				<view class="btn add-btn-cate" @click="addCate">添加分类</view>
			</view>
		</view>
		<view class="tab-content" v-if="curTab==1">
              <view class="state-head">
				  <view class="state-li" v-for="(item,index) in stateList" :key="index" :class="{'state_active':state_cur==index}" @click="getOrderState(index,item)">{{item.name}}</view>
			  </view>
			  <view class="orderList">
				  <view class="order-li" v-for="(item,index) in orderList" :key="index">
					  <view class="time">{{item.addTime}}</view>
					  <view class="order-li-item">
						  <view class="item-head">
							  <view class="item-head-left">{{item.sendTypeText}}</view>
							   <view class="item-head-middle">订单总价：￥{{item.totalPrice}}</view>
							  <view class="item-head-right">{{item.statusText}}</view>
						  </view>
						  <view class="item-content" v-for="(good,i) in item.items" :key="i">
							  <view class="g-img"><u--image :src="imgUrl+good.goodsPhoto" width="160rpx" height="160rpx"></u--image></view>
							  <view class="g-info">
								  <view class="g-title">{{good.goodsName}}</view>
								  <view class="g-intro"><view class="g-tag">数量：{{good.goodsCount}}</view>
								   <view class="g-tag">配送费：{{good.exchangePrice}}</view></view>
								  <view class="g-price">售价：￥{{good.totalPrice}}</view>
							  </view>
						  </view>
						  <view class="item-bottom">
							  <view class="item-bottom-left">订单编号：{{item.orderNumber}}</view>
							  <view class="item-bottom-right">查看评论</view>
						  </view>
						  <view class="bottom-option">
							  <view class="btn-sell red-bg" v-if="item.status==20||item.status==30" @click="cancelOrder(item)">取消订单</view>
							  <view class="btn-sell blue-bg" v-if="item.status==20" @click="takeOrder(item)">确认接单</view>
							  <view class="btn-sell blue-bg" v-if="item.status==40" @click="complete(item)">确认完成</view>
						  </view>
					  </view>
				  </view>
			  </view>

		</view>
		<view class="tab-content" v-if="curTab==2">
            <receiveSet></receiveSet>
		</view>


	</view>
</template>

<script>
	import {
		getStoreData,
		dealNum,
		setStoreData,
		httpPost,
		httpGet,
	} from "@/utils/http.js";
	import {
		appletImgUrl,
		imgUrl
	} from "@/common/config.js"
	const pic1 = require(`@/img/my/my1.png`);
	const avatar = require(`@/img/my/avatar1.jpg`);
	import receiveSet from './component/receive-order-set'
	let devInfo = {};
	uni.getSystemInfo({
		success: function(res) {
			console.log(res.appName)
			devInfo = res
		}
	})
	export default {
		components:{
			receiveSet
		},
		data() {
			return {
				imgUrl:imgUrl,
				stateList: [{
					name: "待接单",
					status:[20]
				}, {
					name: "已接单",
					status:[30]
				}, {
					name: "配送中",
					status:[40]
				}, {
					name: "已完成",
					status:[50,60]
				},{
					name: "异常单",
					status:[70]
				}, {
					name: "已取消",
					status:[0]
				}],
				current: 0,
				curTab: 0,
				cateList: [],
				totalPage: 1,
				status: "loadmore",
				keyword: "",
				tabList: [{
					text: "商品管理"
				}, {
					text: "订单管理"
				}, {
					text: "接单管理"
				}],
				storeid: "",
				model: {
					pageNo: 1,
					pageSize: 10,
					classId: "",
					storeId: ""
				},
				cateGoodList: [],
				cate_cur: 0,
				showModel: false,
				title: "警告",
				content: "确定删除该商品吗？",
				good: {
					id: "",
					index: null
				},
				state_cur:0,
				orderData:{
					pageNo:1,
					pageSize:10,
					statusList:[20]
				},
				orderList:[],
				orderTotalPage:1
			};
		},

		onLoad() {
			this.userInfo = getStoreData("userInfo");
			this.getCateList();
			this.getOrderList();
		},
		onShow() {

		},
		onReachBottom() {
			if (this.model.pageNo < this.totalPage) {
				this.status = 'loading';
				this.model.pageNo++
				this.goodsList();
			} else {
				this.status = 'nomore'
			}
			if (this.orderData.pageNo < this.orderTotalPage) {
				this.status = 'loading';
				this.orderData.pageNo++
				this.getOrderList();
			} else {
				this.status = 'nomore'
			}

		},
		methods: {
			getOrderList(){
				const _this = this;
				console.log(this.orderData);
				httpPost("/api/o2oorderform/sellerList",this.orderData)
					.then((res) => {
						console.log(res)
						let list=[];
						list=res.data.list.map((item)=>{
							item.sendTypeText=_this.getTypeText(item.sendType);
							item.statusText=_this.getStatusText(item.status);
							return item;
							
						})
						_this.orderList=[..._this.orderList,...list];
						if (res.data.count == 0) {
							_this.orderTotalPage = 1;
							_this.status = 'nomore';
						} else {
							_this.orderTotalPage = Math.ceil(res.data.count / 10);
						}
						if (_this.orderData.pageNo >= _this.orderTotalPage) {
							_this.status = 'nomore';
						} else {
							_this.status = 'loading';
						}
					})
					.catch((e) => {});
			},
			getTypeText(type){
				switch (type) {
					case 1:
						return '商家配送'
						break
					case 2:
						return '邮寄'
						break
					case 3:
						return '骑手配送'
						break
					case 4:
						return '进店自取'
						break
				}
			},
			getStatusText(status){
				switch (status) {
					case 10:
						return '待付款'
						break
					case 20:
						return '待接单'
						break
					case 30:
						return '已接单'
						break
					case 60:
						return '已完成'
						break
					case 0:
						return '订单已取消'
						break
					case 40:
						return '配送中'
						break
					case 50:
						return '待评价'
						break
					case 70:
						// return '异常售后处理完成'
						return '异常订单'
						break
					case 80:
						return '退款'
						break
					case 65:
						return '申请售后中'
						break
				}
			},
			tabEvent(val) {
				this.curTab = val;
			},
			searchEvent() {},
			
			editGood(data) {
				uni.navigateTo({
					url: "/pages/o2o/add-goods?goodInfo=" + JSON.stringify(data)
				});
			},
			delGood(data, index) {
				this.showModel = true;
				this.good.id = data.id;
				this.good.index = index;
			
			},
			confirmDelGood() {
				const _this = this;
				httpGet("/api/barcodestore/delete/" + _this.good.id)
					.then((res) => {
						wx.showToast({
							icon: "none",
							title: "删除成功"
						});
						_this.showModel = false;
						_this.cateGoodList.splice(_this.good.index, 1);
					})
					.catch((e) => {});
			},
			cancelDel() {
				this.showModel = false;
			},
			getCateList() {
				const _this = this;
				httpGet("/api/sellerstore/selfInfo")
					.then((res) => {
						if (res.data) {
							_this.storeid = res.data.id;
							_this.model.storeId = res.data.id;
							_this.getCateListNew(res.data.id);
						}
					})
					.catch((e) => {});

			},
			getCateListNew(storeId) {
				const _this = this;
				httpGet("/api/barcodeclass/list/" + storeId)
					.then((res) => {
						_this.cateList = res.data;
						if (res.data.length > 0) {
							_this.model.classId = res.data[0].id;
							_this.model.pageNo = 1;
							_this.cateGoodList = [];
							_this.goodsList();
						}else{
							_this.model.pageNo = 1;
							_this.cateGoodList = [];
						}

					})
					.catch((e) => {});
			},
			menuEvent(index, data) {
				console.log(data)
				this.cate_cur = index;
				this.model.pageNo = 1;
				this.model.storeId = data.storeId;
				this.model.classId = data.id;
				this.cateGoodList = [];
				this.goodsList();
			},
			goodsList() {
				const _this = this;

				httpPost("/api/barcodestore/list", this.model)
					.then((res) => {
						let list = [];
						list=res.data.list;
						if (list.length > 0) {
							console.log(666)
							list = list.map((item) => {
								if(item.goodsImg.indexOf('https')==-1){
									item.goodsImg = imgUrl + item.goodsImg;
								}
								if(item.goodsImg.indexOf('https')!=-1){
									item.goodsImg = item.goodsImg;
								}
								//item.producerTime = JSON.parse(item.producerTime).productDate;

								return item;
							});
						}
						console.log('777',list)
						_this.cateGoodList = [..._this.cateGoodList, ...list];

						if (res.data.count == 0) {
							_this.totalPage = 1;
							_this.status = 'nomore';
						} else {
							_this.totalPage = Math.ceil(res.data.count / 10);
						}
						if (_this.model.pageNo >= _this.totalPage) {
							_this.status = 'nomore';
						} else {
							_this.status = 'loading';
						}

					})
					.catch((e) => {});
			},
			addGoods() {
				uni.navigateTo({
					url: "/pages/o2o/add-goods"
				});
			},
			addCate(){
				uni.navigateTo({
					url: "/pages/o2o/add-cate"
				});
			},
			getOrderState(index,data){
				console.log('999',data)
				this.state_cur=index;
				this.orderData.pageNo=1;
				this.orderData.pageSize=10;
				this.orderData.statusList=data.status;
				this.orderList=[];
				this.getOrderList();
				
			},
			takeOrder(data){
				const _this = this;
				httpGet("/api/o2oorderform/sellerConfirm/"+data.orderNumber)
					.then((res) => {
						
						wx.showToast({
							icon: "none",
							title: "已接单"
						});
						_this.RefreshOrder();
					})
					.catch((e) => {});
			},
			complete(data){
				const _this = this;
				httpGet("/api/o2oorderform/receiveConfirm/"+data.orderNumber)
					.then((res) => {
						wx.showToast({
							icon: "none",
							title: "订单已完成"
						});
						_this.RefreshOrder();
					})
					.catch((e) => {});
			},
			cancelOrder(data){
				const _this = this;
				httpGet("/api/o2oorderform/cancel/seller/"+data.orderNumber)
					.then((res) => {
						wx.showToast({
							icon: "none",
							title: "已取消订单"
						});
						_this.RefreshOrder();
					})
					.catch((e) => {});
			},
			RefreshOrder(){
				this.orderData.pageNo=1;
				this.orderData.pageSize=10;
				this.orderList=[];
				this.getOrderList();
			}

		},
	};
</script>

<style lang="scss">
	.my-content-info {
		background-color: #F7F7F7;
		height: calc(100vh - 44px);


	}

	.nav-box {
		margin-bottom: 20rpx;
	}

	.tab-box {
		display: flex;
		justify-content: center;
		flex-direction: row;
		margin-bottom: 20rpx;
		margin-top: 20rpx;

		.tab-li {
			width: 200rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border: 2rpx solid #D9D9D9;
			border-radius: 20rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;

		}

		.cur-tab {
			background: linear-gradient(to right, #2695F5, #28ECEA);
			color: #fff;
		}
	}

	.search-box {
		padding: 10rpx 30rpx;
		background-color: #2695F5;
	}

	.tab-content {
		.in-head {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-weight: 28rpx;
			font-weight: bold;
			background-color: #fff;

			.in-head-left {
				width: 200rpx;
				text-align: center;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
			}

			.in-head-right {
				padding-top: 24rpx;
				padding-bottom: 24rpx;
			}
		}

		.in-model {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.in-model-left {
				width: 200rpx;
				background-color: #fff;

				.cate-li {
					font-weight: 28rpx;
					text-align: center;
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #eee;
				}

				.cate_active {
					background-color: #eee;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.in-model-right {
				width: 510rpx;
				padding: 20rpx;

				.good-li {
					background-color: #fff;
					margin-bottom: 20rpx;
					padding: 20rpx;
					.goog-li-top {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						margin-bottom: 20rpx;
						border-bottom: 2rpx solid #eee;
						padding-bottom: 20rpx;

						.img {
							width: 180rpx;
							margin-right: 20rpx;
						}

						.g-info {
							.g-title {
								font-size: 28rpx;
								font-weight: bold;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
							.g-intro{
								font-size: 24rpx;
								color: #777879;
							}
							
						}
					}
					.goog-li-bottom{
						display: flex;
						flex-direction: row;
						justify-content: flex-end;
						.g-btn{
							width: 100rpx;
							height: 48rpx;
							line-height: 48rpx;
							font-size: 24rpx;
							text-align: center;
							border-radius: 10rpx;
						}
						.del{
							border: 2rpx solid #FF1C60;
							color: #FF1C60;
						}
						.edit{
							border: 2rpx solid #eee;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
	}
	.bottom-btn-model{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 710rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		.btn{
			width: 340rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 20rpx;
			
		}
		.add-btn-good{
			background: linear-gradient(to right,#28ECEA,#2695F5);
			color: #fff;
		}
		.add-btn-cate{
			background-color: #D9D9D9;
			
		}
	}
	.state-head{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		.state-li{
			font-size: 24rpx;
		}
		.state_active{
			color: #FF1C60;
		}
	}
	.orderList{
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #fff;
		.order-li{
			margin-bottom: 20rpx;
			.time{
				font-size: 24rpx;
				color: #777879;
				padding-top: 10rpx;
				padding-bottom: 10rpx;
			}
			
			.order-li-item{
				border: 2rpx solid #eee;
				border-radius: 20rpx;
				.item-head{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					font-size: 24rpx;
					padding: 20rpx;
					border-bottom: 2rpx solid #eee;
					margin-bottom: 20rpx;
					.item-head-left{
						color: #2695F5;
					}
					.item-head-middle{
						color: #FF1C60;
					}
					.item-head-right{
						color: #777879;
					}
				}
				.item-content{
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					padding-left: 20rpx;
					padding-bottom: 20rpx;
					.g-img{
						margin-right: 20rpx;
					}
					.g-info{
						.g-title{
							font-size: 28rpx;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						.g-intro{
							font-size: 24rpx;
							color: #777879;
						}
						.g-price{
							font-size: 24rpx;
							color: #777879;
						}
					}
				}
				.item-bottom{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					font-size: 24rpx;
					color: #777879;
					padding: 20rpx;
					border-top: 2rpx solid #eee;
				}
			}
		}
	}
	.bottom-option{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
		.btn-sell{
			width: 160rpx;
			height: 60rpx;
			text-align: center;
			font-size: 24rpx;
			line-height: 60rpx;
			color: #fff;
			
			border-radius: 10rpx;
			margin-left: 20rpx;
		}
		.red-bg{
			background-color:#FF1C60 ;
		}
		.blue-bg{
			background: #2695F5;
		}
	}
</style>